/*
 * @Author: huyu 
 * @Date: 2020-06-06 11:27:17 
 * @Last Modified by: huyu
 * @Last Modified time: 2020-06-21 00:28:33
 */

// 博客首页样式
@import "../../theme/index.less";

.main {
  max-width: @content-max-width-normal;
  margin: 0 auto;
}


@media screen and (max-width:1367px) {
  .main {
    max-width: @content-max-width-small;
  }
}

@media screen and (min-width:1921px) {
  .main {
    max-width: @content-max-width-big;
  }
}

.searchBar {
  padding: @padding 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: @gray;
  font-size: @font-size-normal;
  letter-spacing: 2px;
}

.searchInput {
  position: relative;

  input {
    padding: 6px 12px;
    border-radius: @border-radius;
    font-size: @font-size-normal;
    color: @font-color;
    border: 1px solid @border;
    outline: none;
    position: relative;

    &:focus {
      border: 1px solid @highlight-color;
    }
  }
}

.clear {
  padding: 0;
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 1;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 250ms;
  color: @white;
  font-size: 12px;
  background-color: @gray-light;
  transform-origin: center center;
  transform: translateY(-50%) rotate(45deg);

  &:hover {
    background-color: @gray;
  }
}